<template>
  <div class="fenxiao-goods">
    <div class="head-search">
      <div class="head-search-item">
        <input class="searchInput" type="text" 
          ref="searchInput"
          v-model="keywords" placeholder="请输入商品名称"
          @confirm="searchGoodsEvent"
        >
        <div class="icon miniprogram"  @click="searchGoodsEvent">
          <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
      </div>
    </div>
    <div class="goods-list" v-show="list.length">
      <div class="goods-list-items">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :immediate-check="immediateCheck"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index" class="list">
            <div @click="linkJumpUrl(item.item_id)" class="img">
              <img :src="`${item.pic_url}480x480`" v-if="item.is_compress" alt />
              <img :src="`${item.pic_url}`" v-else alt />
              <span v-if="item.discount && item.discount != 10">{{item.discount}}折</span>
            </div>
            <div class="g-flex">
              <p @click="linkJumpUrl(item.item_id)" class="title">
                <span class="fontZiy" v-if="item.is_self_support == 1">自营</span>
                {{item.title}}</p>
              <p class="g-price">
                <span v-html="scaleGoodsPriceFn(item.price)">
                </span>
                <del v-if="is_display_original_price == 1" class="fontGilroy">
                  <em>{{mSymbol.name}}</em>
                  {{item.original_price}}
                </del>
              </p>
              <span class="commission" v-if="item.is_fx_commission == 1">
                预计{{commission_name}}：<em>{{mSymbol.name}}</em>
                <em class="int fontGilroy">{{item.directly_money}}</em>
              </span>
              <p class="g-fx-btn clearfix">
                <span>
                  <van-button class="btn" round :plain="false" color="linear-gradient(to right,#FE1B49,#E90104)" @click="linkJumpUrl(item.item_id)">分享推广</van-button>
                </span>
              </p>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="no-data" v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import { getShareGoods } from '@/api/user/share/shareApi'

import { scaleGoodsPrice } from '@/utils/index.js'
import { mapGetters } from 'vuex'
// import Storage from '@/utils/store.js'

// import Vue from 'vue'
export default {
  data() {
    return {
      list: [],

      // 列表vant组件
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      commission_name: '',
      p: 1,
      keywords: '',

      noData: {
        text: '暂无分享产品',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_distributor.png',
        marginTop: '10em'
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data, 0)
    },
    linkJumpUrl(item_id) {
      this.Jump('shareLink', { id: item_id, linktype: 1 })
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    searchGoodsEvent() {
      this.p = 1
      this.init()
    },
    onLoad() {
      const data = {
        p: this.p,
        keywords: this.keywords
      }
      getShareGoods(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (data.p == 1) {
          if (res.status == 1) {
            this.is_display_original_price = res.data.is_display_original_price
            // 页码为1时   初始列表
            this.list = []
            // 列表
            this.list.push(...res.data.lists)
            if (res.data.lists.length < 10) {
              this.finished = true
            } else {
              this.p++
            }
          } else {
            this.$Error(res.msg)
          }
        } else {
          // 列表
            this.list.push(...res.data.lists)
          if (res.data.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        }
      })
    }
  },
  components: {
    noData
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
}
</script>

<style lang="scss">
@import '../../../styles/variables';
@import '../../../styles/mixin';
.fenxiao-goods {
  padding-top: 115px;
  .head-search{
    padding: 20px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 750px;
    z-index: 9;
    &-item{
      position: relative;
      width: 100%;
      height: 72px;
      border-radius: 36px;
      font-size: 0;
      background: #f7f7f7;
      .icon {
        position: absolute;
        line-height: 72px;
        left: 28px;
        top:0;
        color: #999999;
        font-size: 28px;
        margin-right: 10px;
        &.miniprogram {
          line-height: initial;
          top:22px;
        }
        .icon_search, .img_search{
          width:28px;
          height:28px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
      }
    }
  }
  .goods-list {
    margin: 20px 0;
    padding:10px 0 20px;
    background-color: $default;
    &-items {
      .list {
        display:flex;
        padding-left:20px;
        background: #fff;
        .img {
          padding: 20px 0;
          display: inline-block;
          width: 190px;
          height: 230px;
          overflow: hidden;
          position: relative;
          border-radius: 12px;
          img {
            display:block;
            width: 100%;
            height: 100%;
            border-radius: 12px;
          }
          span {
            display: inline-block;
            overflow: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            color: #fff;
            background: #e4393c;
            padding: 2px 6px;
          }
        }
        .g-flex {
          flex:1;
          margin-left:20px;
          padding: 20px 20px 20px 0;
          width: 500px;
          height: 230px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-bottom:2px solid #EDEDED;
          .title {
            font-size: 26px;
            line-height: 34px;
            color: #333;
            @include showEllipsis;
          }
        }
        .g-price {
          display: inline-block;
          margin: 0;
          margin-top: 10px;
          span {
            color: $warning;
            font-size: 24px;
            em {
              font-weight: bold;
            }
            /* .int {
              font-size: 36px;
              margin-right: -5px;
            } */
          }
          del {
            margin-left: 5px;
            color: #999;
            font-size: 24px;
          }
        }
        .commission {
          font-size: 24px;
          color:#999;
          em {
            color: #FF8C01;
            margin-left: -5px;
            font-size: 26px;
            &.int {
              margin-left: -5px;
            }
          }
        }
        .g-fx-btn {
          margin-top: 10px;
          &>span {
            display: inline-block;
            margin-right:16px;
            // float: left;
            // width: 130px;
            // height: 50px;
            // margin-right: 20px;
            // line-height: 52px;
            // text-align: center;
            // border-radius: 25px;
            // overflow: hidden;
            .btn{
              height:50px;
              padding:0 24px;
              font-size:24px;
              text-align:center;
              color:#F21228;
            }
            /* a {
              display: block;
              width: 100%;
              height: 100%;
              color: $default;
              font-size: 24px;
              font-weight: normal;
              color: $default;
              background-color: $warning;
              &.not {
                background-color: #f5f5f5;
                border-color: red;
                color: #666;
              }
            } */
          }
        }
      }
    }
  }
}
</style>
